import globals from 'globals';
import tseslint from 'typescript-eslint';
import pluginVue from 'eslint-plugin-vue';
import eslint from '@eslint/js';
// eslint-stylistic 插件
import stylistic from '@stylistic/eslint-plugin';
// eslint-plugin-prettier 插件
import eslintPluginPrettierRecommended from 'eslint-plugin-prettier/recommended';
// 自动导入配置
import autoImportConfig from './auto-import.config.js';

/** @type {import('eslint').Linter.Config[]} */
export default tseslint.config(
  {
    ignores: ['node_modules', 'dist', 'public', '.auto-import.config.js'],
    files: ['**/*.{js,mjs,cjs,ts,vue}'],
  },

  /** js推荐配置 */
  eslint.configs.recommended,
  /** ts推荐配置 */
  ...tseslint.configs.recommended,
  /** vue推荐配置 */
  ...pluginVue.configs['flat/recommended'],

  /** stylistic 配置 */
  stylistic.configs.customize({
    indent: 2, // 缩进为 2 个空格
    quotes: 'single', // 单引号
    semi: true, // 语句末尾需要分号
    jsx: true, // 允许在 JSX 中使用单引号
    arrowParens: 'always', // 箭头函数参数需要括号
  }),

  /**
   * javascript 规则
   */
  {
    files: ['**/*.{js,mjs,cjs,vue}'],
    rules: {
      'no-console': 'off', // 是否允许使用 console.log()
    },
  },

  /**
   * 配置全局变量
   */
  {
    languageOptions: {
      globals: {
        ...autoImportConfig.globals,
        ...globals.browser,
        ...globals.node,

        /** 追加一些其他自定义全局规则 */
      },
    },
  },

  /**
   * Vue 规则
   */
  {
    files: ['**/*.vue'],
    languageOptions: {
      parser: pluginVue.parser, // 使用 vue-eslint-parser
      parserOptions: {
        /** typescript项目需要用到这个 */
        parser: tseslint.parser,
        ecmaVersion: 'latest',
        /** 允许在.vue 文件中使用 JSX */
        ecmaFeatures: {
          jsx: true,
        },
      },
    },
    rules: {
      // 在这里追加 vue 规则
      'vue/no-mutating-props': [
        'off',
        {
          shallowOnly: true,
        },
      ],
      'vue/html-indent': ['error', 2],
      'vue/multi-word-component-names': 'off',
      'vue/max-attributes-per-line': 'off',
    },
  },

  /**
   * typescript 规则
   */
  {
    files: ['**/*.{ts,tsx,vue}'],
    rules: {
      '@typescript-eslint/no-explicit-any': 'off',
    },
  },

  /**
   * prettier 配置
   * off与它冲突的ESlint规则
   * 并且启用自己的Recommended规则
   * 会合并根目录下的prettier.config.js 文件
   * @see https://prettier.io/docs/en/options
   */
  eslintPluginPrettierRecommended,
);
